<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .slide {
        position: relative;
        width: 1000px;
        height: 500px;
        margin: 100px auto;
      }
      .slide-item {
        position: absolute;
        box-shadow: 10px 20px 10px #666;
        transition: all 0.6s linear;
      }

      .first {
        top: 80px;
        left: 200px;
        width: 600px;
        z-index: 3;
        transform: translate3d(200px 80px 0);
      }
      .second {
        z-index: 2;
        top: 138px;
        width: 400px;
        opacity: 0.6;
      }
      .left {
        /* left: 0; */
        transform: translate3d(0px 138px 0);
      }
      .right {
        left: 600px;
        /* transform: translate3d(600px 138px 0); */
      }
      .third {
        z-index: 1;
        width: 300px;
        opacity: 0.4;
        left: 350px;
        top: 50px;
        transform: translate3d(350px 50px 0);
      }
      img {
        display: block;
        width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="slide">
        <div class="slide-item first">
          <a href="#">
            <img src="imgs/01.jpg" alt="" />
          </a>
        </div>
        <div class="slide-item second right">
          <a href="#">
            <img src="imgs/02.png" alt="" />
          </a>
        </div>
        <div class="slide-item third">
          <a href="#">
            <img src="imgs/03.jpg" alt="" />
          </a>
        </div>
        <div class="slide-item second left">
          <a href="#">
            <img src="imgs/04.jpg" alt="" />
          </a>
        </div>
      </div>
    </div>
    <script>
      let slideItemList = document.querySelectorAll(".slide-item"),
        classNameList = [];
      // 获取所有className
      function getClassNameList() {
        for (let index = 0; index < slideItemList.length; index++) {
          let item = slideItemList[index];
          classNameList.push(item.className);
        }
      }
      // 删除最后一项,并添加到最开始
      function init() {
        classNameList.unshift(classNameList.pop());
        render(classNameList);
      }
      // 开始执行
      function start() {
        setInterval(init, 1000);
      }
      start();
      // render渲染
      function render(lists) {
        for (let index = 0; index < slideItemList.length; index++) {
          let item = slideItemList[index];
          item.className = lists[index];
        }
      }
      getClassNameList();
    </script>
  </body>
</html>
